import { Component } from "react";
import { Row, Col, message } from "antd";
// markdown 样式
import ReactMarkdown from "react-markdown/with-html";
// markdown table 处理
import gfm from "remark-gfm";
// markdown 代码高亮
import { LightAsync as SyntaxHighlighter } from "react-syntax-highlighter";
// markdown 代码高亮样式
import { tomorrowNightEighties } from "react-syntax-highlighter/dist/esm/styles/hljs";
// import BlogDetail from "./Detail";
import "github-markdown-css/github-markdown.css";
// markdown 目录组件
// import Catalogue from "./Catalogue";
import "./index.css";
// import testMd from "./test.md";

const renderers = {
	code: ({ language, value }) => {
		return (
			<SyntaxHighlighter
				lineNumberStyle={true}
				style={tomorrowNightEighties}
				startingLineNumber={0}
				language={language}
				children={value}
			/>
		);
	},
};

export default class ArticlePage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			markdown: props.markdown,
		};
	}

	UNSAFE_componentWillReceiveProps(props) {
		if (props.markdown !== undefined) {
			this.setState({
				markdown: props.markdown,
			});
		}
	}

	UNSAFE_componentWillMount() {
		// fetch(testMd)
		// 	.then((res) => res.text())
		// 	.then((text) => this.setState({ markdown: text }));
	}

	componentDidCatch(e) {
		message.error("内容存在异常：" + e, 0.5);
	}

	render() {
		const { markdown } = this.state;
		return (
			<Row className="article-box">
				<Col span={2}></Col>
				<Col span={20}>
					<ReactMarkdown
						affix={false}
						className="markdown-body"
						style={{ color: "yello" }}
						escapeHtml={false}
						renderers={renderers}
						source={markdown}
						plugins={[gfm]}
					></ReactMarkdown>
				</Col>
				<Col span={2}></Col>
				{/* <Col span={4}>
					<Catalogue articleDetail={markdown}></Catalogue>
				</Col> */}
			</Row>
		);
	}
}
